<template>
  <j-modal title="产品档案详情" :width="1500" :visible.sync="modalVisible" :maskClosable="false" switchFullscreen>
    <a-spin :spinning="loading">
      <a-row type="flex">
        <a-col :span="14">
          <div class="module-box basic">
            <div class="basic-info">
              <div class="banner-box">
                <viewer v-if="imgs.length" :images="[imgs[0].url]" class="img-wrapper" title="点击预览">
                  <img class="banner-img" :src="imgs[0].url" />
                </viewer>
                <a-empty v-else description="暂无图片" />
                <div class="tags-box">
                  <a-tag v-if="basicData.constituteStatus == 1" color="#108ee9"> 单品 </a-tag>
                  <a-tag v-else color="#87d068"> 组合 </a-tag>

                  <a-tag v-if="basicData.sellStatus == 2" color="green"> 在售 </a-tag>
                  <a-tag v-else-if="basicData.sellStatus == 1" color="cyan"> 开发中 </a-tag>
                  <a-tag v-else-if="basicData.sellStatus == 3" color="blue"> 清仓 </a-tag>
                  <a-tooltip v-else-if="basicData.sellStatus == 4">
                    <template slot="title"> {{ haltParse(basicData.haltStatus) }} </template>
                    <a-tag color="red"> 停售 </a-tag>
                  </a-tooltip>
                </div>
              </div>
              <a-row type="flex">
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> SKU编码：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ basicData.skuCode }} </template>
                        <div class="msg-desc">
                          {{ basicData.skuCode }}
                        </div>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 产品名称：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ basicData.nameCn }} </template>
                        <div class="msg-desc">
                          {{ basicData.nameCn }}
                        </div>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 产品英文名：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ basicData.nameEn }} </template>
                        <span class="msg-desc">
                          {{ basicData.nameEn }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 成本中心：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ costCenterParse(basicData.deptCode) }} </template>
                        <span class="msg-desc">
                          {{ costCenterParse(basicData.deptCode) }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 产品类目：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ basicData.category_dictText }} </template>
                        <span class="msg-desc">
                          {{ basicData.category_dictText }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 产品分类：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title">
                          {{ typeParse(basicData.type) }}
                        </template>
                        <span class="msg-desc">
                          {{ typeParse(basicData.type) }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> EAN码：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ basicData.eanCode }} </template>
                        <span class="msg-desc">
                          {{ basicData.eanCode }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> UPC码：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ basicData.upcCode }} </template>
                        <span class="msg-desc">
                          {{ basicData.upcCode }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 产品使用日期：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ basicData.userDateTime }} </template>
                        <span class="msg-desc">
                          {{ basicData.userDateTime }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 开发负责人：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ userNameParse(basicData.developer) }} </template>
                        <span class="msg-desc">
                          {{ userNameParse(basicData.developer) }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 设计负责人：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ userNameParse(basicData.designer) }} </template>
                        <span class="msg-desc">
                          {{ userNameParse(basicData.designer) }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 销售负责人：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ userNameParse(basicData.saleHead) }} </template>
                        <span class="msg-desc">
                          {{ userNameParse(basicData.saleHead) }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 销售人员：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ userNameParse(basicData.salesperson) }} </template>
                        <span class="msg-desc">
                          {{ userNameParse(basicData.salesperson) }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
                <a-col :span="12">
                  <a-row type="flex">
                    <a-col :span="11" class="msg-title"> 商品描述：</a-col>
                    <a-col :span="13">
                      <a-tooltip>
                        <template slot="title"> {{ basicData.depict }} </template>
                        <span class="msg-desc">
                          {{ basicData.depict }}
                        </span>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </div>
          </div>
          <div class="module-box record">
            <a-tabs default-active-key="1" size="small" tab-position="left">
              <a-tab-pane tab="采购记录" key="1">
                <div class="record-content-box">
                  <div>采购记录未开发</div>
                </div>
              </a-tab-pane>
              <a-tab-pane tab="收货记录" key="2">
                <div class="record-content-box">
                  <div>收货记录未开发</div>
                </div>
              </a-tab-pane>
              <a-tab-pane tab="销售订单" key="3">
                <div class="record-content-box">
                  <div>销售订单未开发</div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-col>
        <a-col :span="10">
          <div class="module-box other">
            <a-tabs default-active-key="1" size="small" tab-position="top">
              <a-tab-pane tab="产品规格" key="1">
                <div class="other-content-box">
                  <a-descriptions title="产品规格" :column="2">
                    <a-descriptions-item label="产品颜色"> {{ otherData.color }} </a-descriptions-item>
                    <a-descriptions-item label="产品尺寸"> {{ otherData.size }} </a-descriptions-item>
                    <a-descriptions-item label="品牌"> {{ otherData.brand }} </a-descriptions-item>
                    <a-descriptions-item label="产品材质">
                      {{ otherData.material_dictText }}
                    </a-descriptions-item>
                    <a-descriptions-item label="产品等级">
                      {{ otherData.level_dictText }}
                    </a-descriptions-item>
                    <a-descriptions-item label="侵权等级">
                      {{ otherData.infringementLevel_dictText }}
                    </a-descriptions-item>
                  </a-descriptions>
                  <a-descriptions title="包装信息" :column="2">
                    <a-descriptions-item label="单品规格(cm)" :span="2">
                      {{ otherData.len }}*{{ otherData.widt }}*{{ otherData.heig }}
                    </a-descriptions-item>
                    <a-descriptions-item label="产品毛重(KG)"> {{ otherData.gw }} </a-descriptions-item>
                    <a-descriptions-item label="产品净重(KG)"> {{ otherData.nw }} </a-descriptions-item>
                  </a-descriptions>
                  <a-table
                    bordered
                    :pagination="false"
                    :rowKey="(record, index) => index"
                    :scroll="{ x: true }"
                    :columns="packageColumns"
                    :data-source="packageData"
                  ></a-table>
                </div>
              </a-tab-pane>
              <a-tab-pane v-if="basicData.constituteStatus != 1" tab="子产品" key="2">
                <div class="other-content-box">
                  <a-list :data-source="childProduct">
                    <a-list-item slot="renderItem" slot-scope="item" class="child-item-list">
                      <div class="child-item-box">
                        <div class="title">
                          仓库SKU：
                          <a-tag v-if="item.sellStatus == 2" color="green"> 在售 </a-tag>
                          <a-tag v-else-if="item.sellStatus == 1" color="cyan"> 开发中 </a-tag>
                          <a-tag v-else-if="item.sellStatus == 3" color="blue"> 清仓 </a-tag>
                          <a-tag v-else-if="item.sellStatus == 4" color="red"> 停售 </a-tag>
                        </div>
                        <div>{{ item.skuCode }}</div>
                        <div class="title">名称/属性：</div>
                        <div>{{ item.productName }};{{ item.colorSize }}</div>
                      </div>
                      <div class="child-item-box">
                        <div class="title">单品规格(cm)：</div>
                        <div>{{ item.len }}*{{ item.widt }}*{{ item.heig }}</div>
                        <div class="title">重量(KG)：</div>
                        <div>{{ item.gw }}</div>
                      </div>
                    </a-list-item>
                  </a-list>
                </div>
              </a-tab-pane>
              <a-tab-pane v-if="basicData.constituteStatus == 1" tab="采购信息" key="3">
                <div class="other-content-box">
                  <a-divider orientation="left"> 采购信息 </a-divider>
                  <a-descriptions :column="1">
                    <a-descriptions-item label="采购负责人">
                      {{ userNameParse(otherData.buyer) }}
                    </a-descriptions-item>
                    <a-descriptions-item label="采购备注"> {{ otherData.remark }} </a-descriptions-item>
                  </a-descriptions>
                  <a-divider orientation="left"> 供应商信息 </a-divider>
                  <a-list item-layout="vertical" :data-source="supplierData">
                    <a-list-item slot="renderItem" slot-scope="item">
                      <a-descriptions :column="2">
                        <a-descriptions-item label="采购平台" :span="2">
                          {{ item.type == 1 ? '1688' : '其他' }}
                        </a-descriptions-item>
                        <a-descriptions-item label="供应商名称" :span="2"> {{ item.name }} </a-descriptions-item>
                        <a-descriptions-item label="采购链接" :span="2"> {{ item.url }} </a-descriptions-item>
                        <a-descriptions-item label="属性" :span="2">
                          <div v-if="item.type == 1">
                            <div v-for="item1 in item.attribute" :key="item1.attributeID">
                              {{ item1.attributeName }}:
                              <span v-for="(val2, index2) in item1.checkVal" :key="index2">{{ val2 }}；</span>
                            </div>
                          </div>
                          <div v-else>{{ item.attribute }}</div>
                        </a-descriptions-item>
                        <a-descriptions-item label="采购单价(CNY)"> {{ item.unitPrice }} </a-descriptions-item>
                        <a-descriptions-item label="供应商规格"> {{ item.specsSup }} </a-descriptions-item>
                        <a-descriptions-item label="入库规格"> {{ item.specsMy }} </a-descriptions-item>
                        <a-descriptions-item label="最低起订量"> {{ item.lowCount }} </a-descriptions-item>
                        <a-descriptions-item label="供应商资料包" :span="2">
                          <j-upload-oss v-model="item.infoFile" fileType="file" :number="1" :disabled="true" />
                        </a-descriptions-item>
                      </a-descriptions>
                    </a-list-item>
                  </a-list>
                </div>
              </a-tab-pane>
              <a-tab-pane v-if="basicData.constituteStatus == 1" tab="质检信息" key="4">
                <div class="other-content-box">
                  <a-descriptions title="质检信息" :column="1">
                    <a-descriptions-item label="是否需要质检">
                      <span v-if="otherData.qualityType == 1">免检</span>
                      <span v-else-if="otherData.qualityType == 2">抽检</span>
                      <span v-else>全检</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="质检模板">
                      {{ otherData.qualityTemplateId_dictText }}
                    </a-descriptions-item>
                  </a-descriptions>
                  <a-table
                    :pagination="false"
                    bordered
                    :columns="qualityColumns"
                    :scroll="{ x: true }"
                    :data-source="qualityData"
                    :rowKey="(record, index) => index"
                    style="margin-top: 20px"
                  >
                    <template #urlSlot="text, record">
                      <viewer v-if="record.url" :images="[record.url]" class="quality-img-wrapper" title="点击预览">
                        <img :src="record.url" />
                      </viewer>
                    </template>
                  </a-table>
                </div>
              </a-tab-pane>
              <a-tab-pane tab="报关清关" key="5">
                <div class="other-content-box">
                  <a-descriptions :column="2">
                    <a-descriptions-item label="申报名称(中文)"> {{ customsData.declareNameCn }} </a-descriptions-item>
                    <a-descriptions-item label="申报名称(英文)"> {{ customsData.declareNameEn }} </a-descriptions-item>
                    <a-descriptions-item label="申报单价"> {{ customsData.declarePrice }} USD</a-descriptions-item>
                    <a-descriptions-item label="海关编码"> {{ customsData.customsCode }} </a-descriptions-item>
                    <a-descriptions-item label="报关税率"> {{ customsData.customsRate }}% </a-descriptions-item>
                    <a-descriptions-item label="材质(中文)"> {{ customsData.materialCn }} </a-descriptions-item>
                    <a-descriptions-item label="材质(英文)"> {{ customsData.materialEn }} </a-descriptions-item>
                    <a-descriptions-item label="说明(中文)"> {{ customsData.remarkCn }} </a-descriptions-item>
                    <a-descriptions-item label="说明(英文)"> {{ customsData.remarkEn }} </a-descriptions-item>
                    <a-descriptions-item label="原产国"> {{ customsData.makeCountry }} </a-descriptions-item>
                    <a-descriptions-item label="原产地"> {{ customsData.makeAddress }} </a-descriptions-item>
                    <a-descriptions-item label="产品属性">
                      {{ customsData.attribute_dictText }}
                    </a-descriptions-item>
                    <a-descriptions-item label="其他属性">
                      {{ dictParse('archive_other_attribute', customsData.otherAttribute) }}
                    </a-descriptions-item>
                    <a-descriptions-item label="电池容量"> {{ customsData.batteryCapacity }}Wh </a-descriptions-item>
                    <a-descriptions-item label="申报备注"> {{ customsData.declareRemark }} </a-descriptions-item>
                  </a-descriptions>
                </div>
              </a-tab-pane>
              <a-tab-pane tab="图  片" key="6">
                <div class="other-content-box">
                  <viewer :images="imgs.map((i) => i.url)">
                    <div v-for="(i, index) in imgs" :key="index" class="module-imgs-box" title="点击预览">
                      <img class="module-imgs" :src="i.url" />
                    </div>
                  </viewer>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-col>
      </a-row>
    </a-spin>
    <template #footer>
      <a-button @click="modalVisible = false"> 取消 </a-button>
      <a-button
        v-has="'ArchiveInfoBasicList:add'"
        type="primary"
        @click="
          modalVisible = false
          $emit('copy')
        "
      >
        复制产品
      </a-button>
      <a-button
        v-has="'ArchiveInfoBasicList:edit'"
        type="primary"
        @click="
          modalVisible = false
          $emit('edit')
        "
      >
        编辑产品
      </a-button>
    </template>
  </j-modal>
</template>

<script>
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import { getAction } from '@/api/manage'

export default {
  name: 'ArchiveDetailModal',
  props: {
    // 要查看的产品档案id
    editId: {
      type: String,
      default: '',
      required: true,
    },
    // 是否显示弹框
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      modalVisible: this.visible,
      loading: false,
      url: {
        queryBasicData: '/hzkj-product/product/archive/hzArchiveInfoBasic/queryById',
        imgs: '/hzkj-product/product/archive/hzArchiveInfoBasic/queryHzArchiveInfoImgsByMainId',
        childProduct: '/hzkj-product/product/archive/hzArchiveInfoBasic/queryHzArchiveInfoCproductByMainId',
        customsData: '/hzkj-product/product/archive/hzArchiveInfoBasic/queryHzArchiveInfoCustomsByMainId',
        otherData: '/hzkj-product/product/archive/hzArchiveInfoBasic/queryHzArchiveInfoOtherByMainId',
        packageData: '/hzkj-product/product/archive/hzArchiveInfoBasic/queryHzArchiveInfoPackageByMainId',
        qualityData: '/hzkj-product/product/archive/hzArchiveInfoBasic/queryHzArchiveInfoProductQualityByMainId',
        supplierData: '/hzkj-product/product/archive/hzArchiveInfoBasic/queryHzArchiveInfoSupplierByMainId',
        costCenter: '/sys/costCenter/queryAllByUserId',
        queryUser: '/sys/user/getAllUserByOrg',
        queryCategoryById: '/hzkj-product/product/productLibrary/category/queryById',
        queryType: '/hzkj-product/product/archive/archiveTypeData/list',
        queryHalt: '/hzkj-product/product/archive/archiveHaltData/list',
      },
      basicData: {}, // 产品档案基本信息
      imgs: [], // 产品图片信息
      childProduct: [], // 子产品信息
      customsData: {}, // 报关清关信息
      otherData: {}, // 其他信息
      packageData: [], // 包装信息
      qualityData: [], // 质检信息
      supplierData: [], // 供应商信息
      userList: [], //查到的所有的人员信息，用于回显
      costCenterList: [], //查到的所有的成本中心，用于回显
      typeList: [], //查到的所有的分类，用于回显
      haltList: [], //查到的所有的停售原因，用于回显
      packageColumns: [
        { title: '仓库', dataIndex: 'warehouseId' },
        { title: '包装材质', dataIndex: 'warehouseMaterialId' },
        { title: '包装规格(cm)', dataIndex: 'specs' },
        { title: '重量(KG)', dataIndex: 'weight' },
      ],
      qualityColumns: [
        { title: '质检项', dataIndex: 'item', width: 70 },
        { title: '质检标准', dataIndex: 'standard', width: 90 },
        { title: '图片', width: 90, align: 'center', scopedSlots: { customRender: 'urlSlot' } },
      ],
    }
  },
  watch: {
    modalVisible(val) {
      this.$emit('update:visible', val)
    },
  },
  computed: {
    dictParse() {
      return (dict, val) => {
        // 使用缓存的字典文本解析函数
        // 如果是逗号分隔的字符串，可能是多个数据，拆分查询后再组合
        if (typeof val != 'string') {
          return filterDictTextByCache(dict, val)
        }
        return val
          .split(',')
          .map((i) => filterDictTextByCache(dict, i))
          .join(',')
      }
    },
    userNameParse() {
      return (val) => {
        if (!val || !this.userList.length) {
          return '-'
        }
        return val
          .split(',')
          .map((i) => this.userList.find((i2) => i2.id == i).username)
          .join(',')
      }
    },
    costCenterParse() {
      return (val) => {
        if (!val || !this.costCenterList.length) {
          return '-'
        }
        return val
          .split(',')
          .map((i) => this.costCenterList.find((i2) => i2.id == i).name)
          .join(',')
      }
    },
    typeParse() {
      return (val) => {
        if (!val || !this.typeList.length) {
          return '-'
        }
        return val
          .split(',')
          .map((i) => this.typeList.find((i2) => i2.id == i).name)
          .join(',')
      }
    },
    haltParse() {
      return (val) => {
        if (!val || !this.haltList.length) {
          return '-'
        }
        return val
          .split(',')
          .map((i) => this.haltList.find((i2) => i2.id == i).name)
          .join(',')
      }
    },
  },
  methods: {
    // 加载用户信息
    getUserList() {
      return new Promise((resolve) => {
        getAction(this.url.queryUser).then((res) => {
          if (res.success) {
            this.userList = res.result
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 加载成本中心
    getCostCenterList() {
      return new Promise((resolve) => {
        getAction(this.url.costCenter).then((res) => {
          if (res.success) {
            this.costCenterList = res.result
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 加载分类
    getTypeList() {
      return new Promise((resolve) => {
        getAction(this.url.queryType, {
          pageNo: 1,
          pageSize: 1000,
        }).then((res) => {
          if (res.success) {
            this.typeList = res.result.records
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 加载分类
    getHaltList() {
      return new Promise((resolve) => {
        getAction(this.url.queryHalt, {
          pageNo: 1,
          pageSize: 1000,
        }).then((res) => {
          if (res.success) {
            this.haltList = res.result.records
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 获取产品档案基本信息
    getBasicData() {
      return new Promise((resolve) => {
        getAction(this.url.queryBasicData, { id: this.editId }).then((res) => {
          if (res.success) {
            this.basicData = res.result
            resolve()
            if (res.result.category) {
              // 回显类目
              getAction(this.url.queryCategoryById, { id: res.result.category }).then((res2) => {
                if (res2.success) {
                  this.basicData = {
                    ...this.basicData,
                    category_dictText: res2.result.name,
                  }
                } else {
                  this.$message.warning(res2.message)
                }
              })
            }
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 获取产品图片信息
    getImgs() {
      return new Promise((resolve) => {
        getAction(this.url.imgs, { id: this.editId }).then((res) => {
          if (res.success) {
            this.imgs = res.result
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 获取子产品信息
    getChildProduct() {
      return new Promise((resolve) => {
        getAction(this.url.childProduct, { id: this.editId }).then((res) => {
          if (res.success) {
            this.childProduct = res.result
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 获取报关清关信息
    getCustomsData() {
      return new Promise((resolve) => {
        getAction(this.url.customsData, { id: this.editId }).then((res) => {
          if (res.success) {
            this.customsData = res.result[0]
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 获取其他信息
    getOtherData() {
      return new Promise((resolve) => {
        getAction(this.url.otherData, { id: this.editId }).then((res) => {
          if (res.success) {
            this.otherData = res.result[0]
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 获取包装信息
    getPackageData() {
      return new Promise((resolve) => {
        getAction(this.url.packageData, { id: this.editId }).then((res) => {
          if (res.success) {
            this.packageData = res.result
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 获取质检信息
    getQualityData() {
      return new Promise((resolve) => {
        getAction(this.url.qualityData, { id: this.editId }).then((res) => {
          if (res.success) {
            this.qualityData = res.result
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
    // 获取供应商信息
    getSupplierData() {
      return new Promise((resolve) => {
        getAction(this.url.supplierData, { id: this.editId }).then((res) => {
          if (res.success) {
            this.supplierData = res.result.map((i) => ({
              ...i,
              attribute: i.type == 1 ? JSON.parse(i.attribute) : i.attribute, // 如果是1688供应商，解析属性
            }))
            resolve()
          } else {
            this.$message.warning(res.message)
          }
        })
      })
    },
  },
  created() {
    this.loading = true
    Promise.all([
      this.getUserList(),
      this.getCostCenterList(),
      this.getTypeList(),
      this.getHaltList(),
      this.getBasicData(),
      this.getImgs(),
      this.getChildProduct(),
      this.getCustomsData(),
      this.getOtherData(),
      this.getPackageData(),
      this.getQualityData(),
      this.getSupplierData(),
    ]).then(() => {
      this.loading = false
    })
  },
}
</script>

<style lang="less" scoped>
.module-box {
  margin: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

  &.basic {
    margin-top: 0;
    height: 220px;
  }
  &.record {
    margin-bottom: 0;
    height: 430px;
  }
  &.other {
    margin-top: 0;
    height: 100%;
  }
}
.basic-info {
  display: flex;
  align-items: flex-start;

  .banner-box {
    margin-right: 10px;
    flex-shrink: 0;

    .img-wrapper {
      width: 150px;
      height: 150px;
      cursor: pointer;
      background-color: #fafafa;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e8e8e8;
    }

    .banner-img {
      max-width: 100%;
      max-height: 100%;
    }

    .tags-box {
      margin-top: 10px;
    }

    /deep/ .ant-empty-image svg {
      width: 100px;
      height: 100px;
    }
  }

  .msg-title {
    font-weight: bold;
    text-align: right;
    font-size: 14px;
  }

  .msg-desc {
    display: inline-block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    font-size: 14px;
  }
}

.record-content-box {
  height: 380px;
  overflow: auto;
}
.other-content-box {
  margin-top: 20px;
  height: 560px;
  overflow: auto;

  .module-imgs-box {
    width: 120px;
    height: 120px;
    float: left;
    background-color: #fafafa;
    margin-bottom: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8e8e8;
    cursor: pointer;
  }

  .module-imgs {
    max-width: 100%;
    max-height: 100%;
  }

  /deep/ .ant-descriptions-item-content {
    word-break: break-all;
  }
}

.child-item-list {
  align-items: flex-start;
}
.child-item-box {
  padding: 0 10px;

  .title {
    font-weight: bold;
  }
}

.quality-img-wrapper {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  background-color: #fafafa;

  img {
    max-width: 100%;
    max-height: 100%;
  }
}
</style>
